<template>
  <div class="ai-generating-container">
    <!-- 动态SVG部分 -->
    <div class="ai-generating-svg" ref="svgContainer">
      <slot name="svg">
        <!-- 默认SVG动画 - 可以替换为您准备好的SVG -->
        <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
          <circle cx="60" cy="60" r="50" fill="none" stroke="#3a86ff" stroke-width="8">
            <animate attributeName="stroke-dashoffset" from="314" to="0" dur="2s" repeatCount="indefinite" />
            <animate attributeName="stroke-dasharray" values="31.4, 31.4; 31.4, 31.4; 31.4, 31.4" dur="2s" repeatCount="indefinite" />
          </circle>
          <path d="M40,70 L60,50 L80,70" stroke="#3a86ff" stroke-width="8" fill="none">
            <animateTransform attributeName="transform" type="translate" values="0 0; 0 -5; 0 0" dur="1.5s" repeatCount="indefinite" />
          </path>
        </svg>
      </slot>
    </div>

    <!-- 文字提示部分 -->
    <div class="ai-generating-text">
      <p>{{ text }}</p>
      <div class="loading-dots">
        <span class="dot" v-for="(dot, index) in dots" :key="index" :style="{ animationDelay: `${index * 0.2}s` }">.</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: 'AI正在为您生成内容'
  },
  speed: {
    type: Number,
    default: 1 // 动画速度倍数
  }
})

const dots = ref(['.', '.', '.'])
const svgContainer = ref(null)

// 控制SVG动画速度
onMounted(() => {
  if (svgContainer.value) {
    const svgElements = svgContainer.value.querySelectorAll('animate, animateTransform')
    svgElements.forEach(el => {
      const duration = parseFloat(el.getAttribute('dur')) / props.speed
      el.setAttribute('dur', duration.toString())
    })
  }
})

// 清理动画
onBeforeUnmount(() => {
  // 可以在这里添加清理逻辑
})
</script>

<style scoped>
.ai-generating-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.ai-generating-svg {
  margin-bottom: 1.5rem;
}

.ai-generating-text {
  font-size: 1.2rem;
  color: #333;
  margin-top: 1rem;
}

.loading-dots {
  display: inline-block;
  margin-left: 0.25em;
}

.dot {
  opacity: 0;
  animation: fadeInOut 1.5s infinite;
  display: inline-block;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
</style>
